<template>
    <div class="station-list-container">
        <n-card :bordered="false">
            <!-- 页面标题和操作栏 -->
            <div class="header-bar">
                <h2>订单管理</h2>
                <n-button type="primary" :loading="loading" @click="handleAddStation">添加订单</n-button>
            </div>

            <!-- 数据表格 -->
            <n-data-table :columns="columns" :data="stations" :loading="loading" class="station-table" :pagination="{
                pageSize: pageSize,
            }" />
        </n-card>
    </div>
</template>

<script setup>
import { ref, onMounted, h } from "vue";
import { NCard, NDataTable, NButton, NTag, NSpace, useMessage } from "naive-ui";
import axios from "axios";
import { useRouter } from "vue-router";
import { API_URLS } from '../../utils/apiConfig';

const router = useRouter();
const message = useMessage();

// 状态管理
const loading = ref(false);
const stations = ref([]);
// 分业管理
const pageSize = ref(10);

// 表格列定义
const columns = [
    { title: "订单名称", key: "order_name", width: 180, },
    { title: "用户ID", key: "user_id", width: 120, },
    { title: "订单类型", key: "type", width: 120, },
    { title: "订单状态", key: "status", width: 120, },
    { title: "AGV编号", key: "car_index", width: 120, },
    { title: "订单优先级", key: "priority", width: 120, },
    { title: "订单起点", key: "order_station_from_id", width: 120, },
    { title: "订单目的地", key: "order_station_to_id", width: 120, },
    {
        title: "操作",
        key: "action",
        width: 160,
        render(row) {
            return h(
                NSpace,
                { size: "small" },
                {
                    default: () => [
                        h(NButton, { size: "small", onClick: () => handleEditStation(row.id) }, { default: () => "编辑" }),
                        h(NButton, { size: "small", type: "error", onClick: () => handleDeleteStation(row.id) }, { default: () => "删除" }),
                    ],
                }
            );
        },
    },
];

// 获取站点列表
const fetchStations = async () => {
    loading.value = true;
    try {
        const response = await axios.get(API_URLS.order.page, {
            params: {
                page: 1,
                page_size: 1000,
            },
        });

        if (response.data.code === 200) {
            stations.value = response.data.data;
        } else {
            message.error(`获取数据失败: ${response.data.msg || "未知错误"}`);
        }
    } catch (error) {
        message.error(`网络错误: 无法连接到服务器 (${error.message})`);
    } finally {
        loading.value = false;
    }
};

// 添加站点
const handleAddStation = () => {
    router.push("/order/order_add");
};

// 编辑站点
const handleEditStation = (id) => {
    router.push({ path: `/order/order_edit/${id}` });
};

// 删除订单
const handleDeleteStation = async (id) => {
    loading.value = true;
    if (confirm("确定要删除这个订单吗？")) {
        try {
            const response = await axios.delete(`${API_URLS.order.delete}/${id}`, {
                params: {},
            });

            if (response.data.code === 200) {
                message.success("订单删除成功");
                fetchStations(); // 重新加载数据
            } else {
                message.error(`删除失败: ${response.data.msg || "未知错误"}`);
            }
        } catch (error) {
            message.error(`网络错误: 无法删除订单 (${error.message})`);
        } finally {
            loading.value = false;
        }
    }
};

// 组件挂载时加载数据
onMounted(() => {
    fetchStations();
});
</script>

<style scoped>
.station-list-container {
    padding: 20px;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-bar h2 {
    margin: 0;
    font-size: 20px;
}

.station-table {
    margin-top: 10px;
}
</style>